<template>
  <div id="order-page">
    <c-title text="订单管理"></c-title>
    <van-tabs v-model="active_name" title-active-color="#4978F8" color="#4978F8" @click="clickTab">
      <van-tab title="个人订单" name="1">
        <div class="order-type" v-if="active_name == '1'">
          <span :class="order_type == item.value ? 'type-card active-type-color' : 'type-card'" @click="optionType(item.value)" v-for="(item, index) in orderTabList" :key="idnex">{{
            item.name
          }}</span>
        </div>
        <d-list :loading="loading" :finished="finished" @load="onLoad" v-if="active_name == '1'">
          <div class="order-detail" @click="goOrderDetail('individual', item.order_id)" v-for="(item, index) in orderList" :key="index">
            <div class="order-sn">
              <span class="order-sn-color">订单号：{{ item.order_sn }}</span>
              <span
                :class="
                  item.status_name == '待审核' || item.status_name == '待接单'
                    ? 'order-sn-status order-waite-color'
                    : item.status_name == '待服务' || item.status_name == '超时关闭'
                    ? 'order-sn-status order-service-color'
                    : 'order-sn-status'
                "
                >{{ item.status_name }}</span
              >
            </div>
            <div class="order-time" v-if="item.need_type == 0">服务时间: {{ item.start_time_str }} - {{ item.finish_time_str }}</div>
            <div class="order-time" v-if="item.need_type == 1">预约时间: {{ item.start_time_str }}</div>
            <div class="publish-pane">
              <img :src="item.has_one_member.avatar_image" alt="" />
              <div class="publish-right">
                <div class="publish-name">
                  <span>{{ item.order_address.realname }}</span>
                  <span class="publish-mobile">({{ item.order_address.mobile }})</span>
                </div>
                <div class="publish-address">{{ item.order_address.address }}</div>
              </div>
            </div>
            <div class="tec-pane">
              <img :src="item.image_url" alt="" />
              <div class="tec-right">
                <div class="tec-name">{{ item.title }}</div>
                <div class="tec-content">{{ item.content }}</div>
                <div class="service-charge">服务费 ￥{{ item.service_fee }}</div>
              </div>
            </div>

            <div class="evaluation-pane">
              <span
                :class="citem.value == 'pay' ? 'evaluation-card pay-sty' : citem.value == 'publish' || citem.value == 'receive' ? 'evaluation-card' : 'evaluation-card cancal-sty'"
                v-for="(citem, cindex) in item.button_models"
                @click.stop="evenButtonModels(citem, item)"
                >{{ citem.name }}</span
              >
            </div>
          </div>
        </d-list>
      </van-tab>
      <van-tab title="企业订单" name="2">
        <div class="order-type" v-if="active_name == '2'">
          <span :class="order_type == item.value ? 'type-card active-type-color' : 'type-card'" @click="optionType(item.value)" v-for="(item, index) in orderTabList" :key="idnex">{{
            item.name
          }}</span>
        </div>
        <d-list :loading="loading" :finished="finished" @load="onLoad" v-if="active_name == '2'">
          <div class="order-detail" @click="goOrderDetail('enterprise',item.order_id)" v-for="(item, index) in orderList" :key="index">
            <div class="order-sn enterprise-order">
              <span class="order-sn-color">订单号：{{item.order_sn}}</span>
              <span
                :class="
                  item.status_name == '待审核' || item.status_name == '待接单'
                    ? 'order-sn-status order-waite-color'
                    : item.status_name == '待服务' || item.status_name == '超时关闭'
                    ? 'order-sn-status order-service-color'
                    : 'order-sn-status'
                "
                >{{ item.status_name }}</span>
            </div>
            <div class="tec-pane">
              <img :src="item.has_one_category ? item.has_one_category.thumb_url : ''" alt="" />
              <div class="tec-right">
                <div class="tec-name">{{item.title}}</div>
                <div class="tec-content">{{item.content}}</div>
                <div class="service-charge">服务费 ￥{{item.amount}}</div>
              </div>
            </div>
            <div class="evaluation-pane">
              <span
                :class="citem.value == 'pay' ? 'evaluation-card pay-sty' : citem.value == 'publish' || citem.value == 'receive' ? 'evaluation-card' : 'evaluation-card cancal-sty'"
                v-for="(citem, cindex) in item.button_models"
                @click.stop="evenButtonModels(citem, item)"
                >{{ citem.name }}</span
              >
            </div>
          </div>
        </d-list>
      </van-tab>
    </van-tabs>

    <bottom-bar tab_type="我的"></bottom-bar>
    <evaluation-popup :evaluation_show.sync="evaluation_show" v-if="evaluation_show" :order_id="order_id" @commentEvent="commentEvent"></evaluation-popup>
  </div>
</template>
<script>
import index_controller from "./index_controller";

export default index_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#order-page {
  padding-bottom: 5rem;

  .order-type {
    background: white;
    padding: 0.6rem;
    overflow: auto;
    display: flex;
    font-size: 0.85rem;

    .type-card {
      border-radius: 0.7rem;
      padding: 0.35rem 0.6rem;
      line-height: 1;
      margin-right: 1rem;
      white-space: nowrap;
      color: #333;
    }

    .active-type-color {
      background: #4978f8;
      color: white !important;
    }
  }

  .order-detail {
    background: white;
    padding: 0.6rem;
    margin-top: 0.4rem;

    .order-sn {
      display: flex;
      justify-content: space-between;
      // 待接单 待审核
      .order-waite-color {
        color: #ff9c43 !important;
      }
      // 待服务
      .order-service-color {
        color: #f84949 !important;
      }

      .order-sn-status {
        font-size: 0.85rem;
        font-weight: 400;
        color: #333;
      }

      .order-sn-color {
        font-size: 0.85rem;
        font-weight: 400;
        color: #999;
      }
    }

    .enterprise-order {
      margin-bottom: 0.6rem;
    }

    .order-time {
      background: rgba(255, 238, 223, 0.39);
      border-radius: 0.2rem;
      font-size: 0.85rem;
      font-weight: 400;
      color: #ff9c43;
      padding: 0.325rem 0;
      width: 100%;
      margin: 0.6rem 0;
    }

    .publish-pane {
      display: flex;
      margin-bottom: 1rem;

      img {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        margin: 0;
      }

      .publish-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 0.2rem;
        line-height: 1;

        .publish-name {
          font-size: 0.85rem;
          font-weight: bold;
          color: #333;
          text-align: left;
          display: flex;
          align-items: center;

          .publish-mobile {
            font-size: 0.75rem;
            font-weight: 400;
            color: #999;
            margin-left: 0.2rem;
          }
        }

        .publish-address {
          font-size: 0.8rem;
          font-weight: 400;
          color: #999;
          text-align: left;
        }
      }
    }

    .tec-pane {
      background: rgba(245, 245, 245, 0.39);
      border-radius: 0.2rem;
      padding: 0.6rem;
      display: flex;

      img {
        width: 3.6rem;
        height: 3.6rem;
        background: rgba(232, 232, 232, 0.39);
        border-radius: 0.2rem;
        margin: 0;
      }

      .tec-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: left;
        margin-left: 0.3rem;

        .tec-name {
          font-size: 0.85rem;
          font-weight: 400;
          color: #333;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          word-break: break-all;
          overflow: hidden;
        }

        .tec-content {
          font-size: 0.75rem;
          font-weight: 400;
          color: #999;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          word-break: break-all;
          overflow: hidden;
        }

        .service-charge {
          font-size: 0.75rem;
          font-weight: 400;
          color: #ff9c43;
        }
      }
    }

    .evaluation-pane {
      width: 100%;
      text-align: right;
      margin-top: 0.6rem;
      margin-bottom: 0.4rem;

      .evaluation-card {
        background: rgb(73, 120, 248);
        border-radius: 0.875rem;
        color: white;
        padding: 0.3rem 1rem;
        margin: 0 0.225rem;
        line-height: 1;
      }

      .cancal-sty {
        border: 0.05rem solid #909090;
        color: #909090 !important;
        background: white !important;
        padding: 0.25rem 1rem !important;
      }

      .pay-sty {
        background-color: #f14e4e !important;
        color: #fff !important;
      }
    }
  }
}
</style>
